<template>
	<div class="card-confirm-order-custom">

		<div class="form-info">
			<div class="item user-info">
				<div class="user-name">
					<span>联系人：</span>
					<input type="text"  v-if='custname' :value='custname'/>
					<input type="text"  v-else placeholder="填写联系人姓名" @input='saveValue("username",$event)' maxlength="4" v-model="customNameUser"/>
				</div>
				<div class="phone"><span class="iconfont icon-shouji"></span>
					<input type="text" v-if='mobilephone' :value='mobilephone' />
					<input type="text" v-else placeholder="填写手机号" @input='saveValue("phone",$event)' maxlength="11" v-model="mobilePhoneUser"/>
				</div>
			</div>
		</div>
		

	</div>
</template>
<script>
	export default {
		data() {
				return {
					customNameUser:localStorage.getItem('username'),
					mobilePhoneUser:localStorage.getItem('phone')
				}
			},
			props: {
				custname:{
					type:String,
					default:''
				},
				mobilephone:{
					type:String,
					default:''
				}
			},
			methods: {
				saveValue: function(name,event) {
		                var self = this,
		                    val = event.currentTarget.value;
		                 localStorage.setItem(name, val);
		        }
				
			},
			ready: function() {

			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	body {
		background: #eeeeee!important;
	}
	
	.card-confirm-order-custom {
		font-size: rem(14);
		color: #333;
		.form-info{
			padding-left: rem(14);
			background: #fff;
			font-size: rem(14);
			color: #333;
			.item{
				display: flex;
				align-items: center;
				width: rem(375);
				height: rem(44);
				border-bottom: 1px solid #eee;
			}
			.user-info{
				.user-name{
					width: rem(220);
					height: rem(44);
					border-right: 1px solid #eee;
					display: flex;
					align-items: center;
					span{
						font-size: rem(14);
						display: block;
					}
					input{
						border: none;
						width: rem(100);
						font-size: rem(14);
						display: block;
					}
				}
				.phone{
					padding-left: rem(13);
					height: rem(44);
					display: flex;
					align-items: center;
					span{
						font-size: rem(18);
						color: #999;
						display: block;
					}
					input{
						border: none;
						padding-left: rem(5);
						display: block;
						width: rem(100);
						color: #999;
					}
					
				}
			}
			.choose-info-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: rem(375);
				height: rem(44);
				border-bottom: 1px solid #eee;
				.left{
					
				}
				.right{
					padding-right: rem(20);
					span{
						color: #c7c7cc;
						font-size: rem(14);
					}
				}
				.store{
					color: #999;
				}
			}
		}
		}
</style>